<template>
    <div class="tablePage">
        <el-table :data="pageData.records" stripe style="width: 100%"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column fixed type="selection" width="55" /> -->
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="name" label="name" width="180" />
        <el-table-column prop="leval" label="leval" width="80" />
        <el-table-column prop="path" label="path" />
        <el-table-column prop="parentId" label="parentId" width="180" />
        <el-table-column label="Operations"  width="180">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        </el-table>
      <div class="flex items-center" style="padding: 10px; 0">
        <el-pagination background 
        v-model:current-page="pageData.current"
        v-model:page-size="pageData.size"
        :page-sizes="[20, 50, 100]"
        :total="pageData.total"
        layout="total, sizes, prev, pager, next" 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
      </div>
    </div>

</template>

<script lang="ts" setup>
import { ref,reactive,toRefs  } from "vue";
import axios from '@/request'
import {PageType} from '@/type/PageData'
import {ruleForm} from '@/type/LearnMenu'
import { ElTable,ElMessage,genFileId } from 'element-plus'

const centerDialogVisible = ref(false)
const value = ref('')
const parentDisable = ref(false)

const props = defineProps({  // 可以拿到它的值
  dataListPath: String,
})
//此处必须用toRefs，否则将失去响应式
const { dataListPath } = toRefs(props);

interface Params{
  current: number,
  size: number,
}

const params = {
  current: 1,
  size:20
}
const pageData: PageType = reactive(new PageType())
function getDataList (path?:String, params?:Params){
// 请求需要的参数
  const _path: string = path as string;
  const parms = axios.get<PageType>(_path,params);
  parms.then((res)=>{
    pageData.current = res.data?.current;
    pageData.size = res.data?.size
    pageData.total = res.data?.total
    pageData.records = res.data?.records
  });
}
const refreshTableView = () => {
  refresh();
}
// 第二步：暴露方法
defineExpose({ refreshTableView })
const refresh = () => {
  getDataList(dataListPath?.value, params);
}

if(undefined != dataListPath?.value){
  refresh();
}

// 分页用的
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<ruleForm[]>([])
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
}

const handleSizeChange = (val: number) => {
  params.size = val;
  refresh();
}
const handleCurrentChange = (val: number) => {
  params.current = val;
  refresh();
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
// 编辑按钮
const emit = defineEmits(["editRecord"]);
const handleEdit = (index: number, row: ruleForm) => {
  emit('editRecord', row.id);
}
// 删除按钮
const handleDelete = (index: number, row: ruleForm) => {
  const url = dataListPath?.value + "/"+ row.id
  const parms = axios.delete(url)
  parms.then((res)=>{
    if(res.msg == "success"){
      ElMessage({
        message: '删除成功.',
        type: 'success',
      })
      // 刷新页面
      refresh();
    }else {
      ElMessage.error('提交失败.')
    }
  })
}

</script>